フェイスブックのようなレイアウトは、拡張的なユーザー体験を実現する、いくつもの革新的な機能を提供します。Spread.Viewsでは、ユーザーはソーシャルボタン（「いいね」など）、コメント、投稿の共有など、フェイスブックのような操作を実行できるようになります。
ここで紹介するデモは、Spread.Viewsの以下の機能を使用することで作成できます。
Spread.Viewsを使用して、次のイメージのようなソーシャルネットワーキングインタフェースを作成するには、次の手順を実行します。
サンプルコード
以下の参照をプロジェクトに追加します。
<link rel="stylesheet" type="text/css" href="[Your Stylesheet Path]/gc.spread.views.dataview.10.0.0.css"> <script src="[Your Script Path]/gc.spread.common.10.0.0.min.js" type="text/javascript"></script> <script src="[Your Script Path]/gc.spread.views.dataview.10.0.0.min.js" type="text/javascript"></script> <script src="[Your Script Path]/gc.spread.views.gridlayout.10.0.0.min.js" type="text/javascript"></script> <script src="[Your Script Path]/zepto.min.js" type="text/javascript"></script> <script src="[Your Script Path]/license.js" type="text/javascript"></script> <script src="data/comments.js" type="text/javascript"></script>headタグ内に、インタフェースにスタイルを適用するためのstyleタグを追加します。
* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } @font-face { font-family: 'spreadview-demo-icon'; src: url(data:application/font-woff;base64,d09GRgABAAAAABFcAA8AAAAAHdwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABWAAAADMAAABCsP6z7U9TLzIAAAGMAAAAQwAAAFY+IUkyY21hcAAAAdAAAAB2AAAB7glP7Q1jdnQgAAACSAAAABMAAAAgBtX/AmZwZ20AAAJcAAAFkAAAC3CKkZBZZ2FzcAAAB+wAAAAIAAAACAAAABBnbHlmAAAH9AAABmYAAAoULpqylGhlYWQAAA5cAAAAMAAAADYJoqfYaGhlYQAADowAAAAdAAAAJAc9A11obXR4AAAOrAAAABgAAAAsJ50AAGxvY2EAAA7EAAAAGAAAABgNMA9MbWF4cAAADtwAAAAgAAAAIAEhDDZuYW1lAAAO/AAAAXcAAALNzJ0cHnBvc3QAABB0AAAAbAAAAJC8t9mhcHJlcAAAEOAAAAB6AAAAhuVBK7x4nGNgZGBg4GKQY9BhYHRx8wlh4GBgYYAAkAxjTmZ6IlAMygPKsYBpDiBmg4gCAIojA08AeJxjYGSexTiBgZWBgamKaQ8DA0MPhGZ8wGDIyAQUZWBlZsAKAtJcUxgcXjC84GQO+p/FEMUcxDAdKMwIkgMA8cgL0QB4nO2R0Q3CQAxD39FQ6Kmj8MlAfDELo2aL1kk9BpGepVi5+7CBO7CIlwgYXwY1H7mj/YXZfvDumyg/t+OQUqo9Wm+6Df248uDJ1u9W/rO3/rzNyu2ikzRKjzTVSJrKNk21lUYpk0Z5k0bJk0YdqKkL5gl3XxtNAAB4nGNgQAMSEMgc9D8ThAESZgPbAHicrVZpd9NGFB15SZyELCULLWphxMRpsEYmbMGACUGyYyBdnK2VoIsUO+m+8Ynf4F/zZNpz6Dd+Wu8bLySQtOdwmpOjd+fN1czbZRJaktgL65GUmy/F1NYmjew8CemGTctRfCg7eyFlisnfBVEQrZbatx2HREQiULWusEQQ+x5ZmmR86FFGy7akV03KLT3pLlvjQb1V334aOsqxO6GkZjN0aD2yJVUYVaJIpj1S0qZlqPorSSu8v8LMV81QwohOImm8GcbQSN4bZ7TKaDW24yiKbLLcKFIkmuFBFHmU1RLn5IoJDMoHzZDyyqcR5cP8iKzYo5xWsEu20/y+L3mndzk/sV9vUbbkQB/Ijuzg7HQlX4RbW2HctJPtKFQRdtd3QmzZ7FT/Zo/ymkYDtysyvdCMYKl8hRArP6HM/iFZLZxP+ZJHo1qykRNB62VO7Es+gdbjiClxzRhZ0N3RCRHU/ZIzDPaYPh788d4plgsTAngcy3pHJZwIEylhczRJ2jByYCVliyqp9a6YOOV1WsRbwn7t2tGXzmjjUHdiPFsPHVs5UcnxaFKnmUyd2knNoykNopR0JnjMrwMoP6JJXm1jNYmVR9M4ZsaERCICLdxLU0EsO7GkKQTNoxm9uRumuXYtWqTJA/Xco/f05la4udNT2g70s0Z/VqdiOtgL0+lp5C/xadrlIkXp+ukZfkziQdYCMpEtNsOUgwdv/Q7Sy9eWHIXXBtju7fMrqH3WRPCkAfsb0B5P1SkJTIWYVYhWQGKta1mWydWsFqnI1HdDmla+rNMEinIcF8e+jHH9XzMzlpgSvt+J07MjLj1z7UsI0xx8m3U9mtepxXIBcWZ5TqdZlu/rNMfyA53mWZ7X6QhLW6ejLD/UaYHlRzodY3lBC5p038GQizDkAg6QMISlA0NYXoIhLBUMYbkIQ1gWYQjLJRjC8mMYwnIZhrC8rGXV1FNJ49qZWAZsQmBijh65zEXlaiq5VEK7aFRqQ54SbpVUFM+qf2WgXjzyhjmwFkiXyJpfMc6Vj0bl+NYVLW8aO1fAsepvH472OfFS1ouFPwX/1dZUJb1izcOTq/Abhp5sJ6o2qXh0TZfPVT26/l9UVFgL9BtIhVgoyrJscGcihI86nYZqoJVDzGzMPLTrdcuan8P9NzFCFlD9+DcUGgvcg05ZSVnt4KzV19uy3DuDcjgTLEkxN/P6VvgiI7PSfpFZyp6PfB5wBYxKZdhqA60VvNknMQ+Z3iTPBHFbUTZI2tjOBIkNHPOAefOdBCZh6qoN5E7hhg34BWFuwXknXKJ6oyyH7kXs8yik/Fun4kT2qGiMwLPZG2Gv70LKb3EMJDT5pX4MVBWhqRg1FdA0Um6oBl/G2bptQsYO9CMqdsOyrOLDxxb3lZJtGYR8pIjVo6Of1l6iTqrcfmYUl++dvgXBIDUxf3vfdHGQyrtayTJHbQNTtxqVU9eaQ+NVh+rmUfW94+wTOWuabronHnpf06rbwcVcLLD2bQ7SUiYX1PVhhQ2iy8WlUOplNEnvuAcYFhjQ71CKjf+r+th8nitVhdFxJN9O1LfR52AM/A/Yf0f1A9D3Y+hyDS7P95oTn2704WyZrqIX66foNzBrrblZugbc0HQD4iFHrY64yg18pwZxeqS5HOkh4GPdFeIBwCaAxeAT3bWM5lMAo/mMOT7A58xh0GQOgy3mMNhmzhrADnMY7DKHwR5zGHzBnHWAL5nDIGQOg4g5DJ4wJwB4yhwGXzGHwdfMYfANc+4DfMscBjFzGCTMYbCv6dYwzC1e0F2gtkFVoANTT1jcw+JQU2XI/o4Xhv29Qcz+wSCm/qjp9pD6Ey8M9WeDmPqLQUz9VdOdIfU3Xhjq7wYx9Q+DmPpMvxjLZQa/jHyXCgeUXWw+5++J9w/bxUC5AAEAAf//AA94nKVVWW8b1xU+597ZOByumoWyyDE3cWxSkFyuiqxSlBfQkukFtpDQSaTQjqy2kG3JDeCg6PagwLXRJgKyFKhbBAisxwat+tKXAH1on7oAbX5CHwIZRZGnPrSIxj2XYhU7ibqgQ86957vnzMy55zvnXAgAPP473+FBiMBhmIAZuAAvwRp8FzbhQqsTCzE1ajCFq0ovEmA8rDGGnPWCMkMAXBAzQleXGCB03vj+3Y3vfPPOK7dWV15eeuHZy+fP1gZXJS6nSqOWqai5bMGrVetOpWzHCHsD3CCMn9ELXMI9fBz38BfZfxn/vb3QC/uhgV7gvt5N279wXKTRTj8h4vV94Lj+Tw7S4MqnDz5h9bTiiZc/uGETtG7Qa1xUVsXkrAoL/w9PaFh+VdiLwf/9/2qE2v46AChfyO1065kgqjr2OQ0g17DPqIx9QmkiPiUUdH6GQuO/pTAz0GcOoGSgb2T2KMkNcCVzMCXst2l791EfMcdxdxsH6/Ap9P8F/el4UoAe3+NX2F8hBflWBhhna7SI68AB+AJwDl0SoFNw7JwkJ0rY351jmxFUsh4Wqg2slw+jwLRXfiWf8l/dsqyiddzy3zZNvGFN2UXL2sL7qTwutd3iljltlgYKXBWWU/bWEdj3pUa+uH1fOONrYnUdqCDZAlCZdoGY7dijBbPvi6mSExPkxAxmBjWT8QSqlx20ec3037GnrKJtP/RfTeXzKbz/0LaL/Q+bOOWawsOiNW09LLrkGW5Z0wQt/x2z78v3KM9qMAReK69TBmE7gHA6SM6cIq8QFoTLXRGsTr7AZLtkVZtypRbAWDYsHztzp/f2xZP4iv/6yrUH89fKY9/Y/PObK+VD0t/8H/ivo8Hi2VPXftj/ztf4Dvs1FCDZGh6ht2E7hHBKvJd2Dyv5bI7JFu01jLmsp6j0o9Qq1Au0yxlsshkcR6/aZJWyi3zn7kf3vOKtt0byepgziXFDCpmqGVUj3WW8+NoHy/c+uotLV7d60tWCJqGhI9MkHpHDtpZMDhXLby7Mvdab7G0J9h9v8+f5JdCgCbfgXGt+brbBuYxtkClJZH4TdACmQ48smKyxJXpGlbjaAwkUSXmRNhLoQiBg4NzN1ZXl0UozWf/SYasUpJJrVMdRMe0mYrXg5ap1j6YwU5UIhhnd6OVitB3Jsam+alWviVWvXiObJjZM1bb27kEVFsRYi4larDfqjSZr1EUoyIBqd9NO2vRnG2PJ39Qx2wiHTSfkhoLhhG4bph6Pq3Y4aSTZnbmTqyxq6ik9EE+0R2QLM73zZ+pfPT1rvJcqFlM/Mp9JJ0OGnbCTE/NHRq5NPbscMVniUIKZeDFVxPTX040qRk7MJ0KFWDiaDgzpBvo/ZoqiKezoYiQaKB6JJ71QXsOyVT4aN0sFw5gsnX/+kOMUU3jdLYbmim74RMe28udnK5MityiOgoNz7DF1PROGIQ93W1TBTE7ZYYo0G6YCAS6am9Q++/P4xW7LI27ktb0iJtVaP09fVhAlCS/RhNJzIKF0dqRV+LwlrH3e8EorDpBJJ5xoJKCRG4qpUi46DU+1KhZWc1kqQMuslKkJeA7makhtwGv0G8LvyhuVM/iSIUv+n6SQLOEEd3f8Yzv8nLm4s2getzeIoY3KdJsphuR/KNGI49LtHX/iET5IWYuPXrSsDRsGPX+bx/d7/nE4CV+B5dbV504zRTuaGY4FUKHG0JY5I0FBuCkxBqoC6iqEIaCFA71IiGmGzhTUlCVQg0F1AVQ12IWgGuxcX7669MKVy5cudObaszNm3iyIKxelRMXYXpbt5VfZdv4DHoplYqaL1PYptyseJbdCARM2scGhEMv967BuUDZTih5Gcca4upbX9P6w+an4hq7uiap+xjc0jeEfmab59/8xIsnbioR/0bV6ddQ/NlrFmrD7qRcYo+NjTPPe13T8pf8rsYizYjxA9pdZbPdjKgXdZNdn6aSUL9MXdz8eP3VinA31nVi0kuiai3qfh3f5Jk+JSocgRCknXZhvtUUX4wiiA1BjoE4gg6TI0pJuaFxRVWWhLyhqNxigIlc78ZibSo7YVmw4PhyLx8QVDcnJEmZqmf27Wjazo2U7jOOs7gjANz/Z4N/2t3c/ZON4QcifbKyvY8LOMvdYmuU/WF9n76/72+v+z9b8b03evp0dy2N2PN2YvA3/BLk0ptwAAHicY2BkYGAA4gc3EqbH89t8ZeBmfgEUYbjsu0kGQf/PZH7BHATkcjAwgUQBYW4L1XicY2BkYGAO+p8FJF8wMPz/DySBIiiAGwCH1AWgAAAAeJxjfsHAwAzDkVCMzhcE4gUMDACy5wa/AAAAAADuAZYB3AIiAlYCogNkA+gErAUKAAEAAAALAJAACQAAAAAAAgAkADQAcwAAAHULcAAAAAB4nHWQy07CQBSG/5GLCokaTdw6KwMxlksiCxISEgxsdEMMW1NKaUtKh0wHEl7Dd/BhfAmfxZ92MAZim+l855szZ04HwDW+IZA/Txw5C5wxyvkEp+hZLtA/Wy6SXyyXUMWb5TL9u+UKHhBYruIGH6wgiueMFvi0LHAlLi2f4ELcWS7QP1ouknuWS7gVr5bL9J7lCiYitVzFvfgaqNVWR0FoZG1Ql+1mqyOnW6moosSNpbs2odKp7Mu5Sowfx8rx1HLPYz9Yx67eh/t54us0UolsOc29GvmJr13jz3bV003QNmYu51ot5dBmyJVWC98zTmjMqtto/D0PAyissIVGxKsKYSBRo61zbqOJFjqkKTMkM/OsCAlcxDQu1twRZisp4z7HnFFC6zMjJjvw+F0e+TEp4P6YVfTR6mE8Ie3OiDIv2ZfD7g6zRqQky3QzO/vtPcWGp7VpDXftutRZVxLDgxqS97FbW9B49E52K4a2iwbff/7vB+NphE8AeJxtxkEOgyAQBdD5tIpIr8KhkIwOCVgC46K3b9JufatHhv5Wuudh8MATE2ZYLHBY4fEio2JVQslDl8K7hi0frudDfpuGxM42vWvlU53KVbcRrjY3PlMuXnscErg2/fjYNafCIRYl+gJfpB7ZeJxj8N7BcCIoYiMjY1/kBsadHAwcDMkFGxlYnTYxMDJogRibuZgYOSAsPgYwi81pF9MBoDQnkM3utIvBAcJmZnDZqMLYERixwaEjYiNzistGNRBvF0cDAyOLQ0dySARISSQQbOZhYuTR2sH4v3UDS+9GJgYXAAx2I/QAAA==) format('woff'); } .demo-icon { font-family: "spreadview-demo-icon"; font-style: normal; display: inline-block; text-align: center; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-variant: normal; text-transform: none; } .icon-share:before { content: '\e804'; } .icon-comment:before { content: '\e805'; } .icon-like:before { content: '\e806'; } .gc-grid { padding: 1em; } .gc-cell-border { border: 0; } .post-wrapper { border: 1px solid; border-color: #e5e6e9 #dfe0e4 #d0d1d5; border-radius: 3px; -webkit-border-radius: 3px; -ms-border-radius: 3px; background-color: white; color: #141823; width: 452px; margin: 0 5px 10px 0; } .user-content-wrapper { padding: 12px 12px 0 12px; } .block-wrapper { margin-bottom: 10px; } .user-icon { display: inline-block; margin-right: 10px; } .user-stamp { vertical-align: top; display: inline-block; } .user-stamp-name { display: inline-block; } .user-story { display: inline-block; } .user-stamp-time { display: inline-block; } .comment-link { display: inline-block; margin-top: 10px; font-size: 12px; color: #9197a3; } .comment-link:hover { color: #828793; text-decoration: none; } .interface-icons-wrapper { padding-top: 10px; margin-top: 10px; border-top: 1px solid #e1e2e3; } .interface-icons { display: table-cell; } .comment-icon-link { margin-right: 30px; color: #7f7f7f; cursor: pointer; } .comment-icon-link:hover { text-decoration: underline; } .icon-checked { color: #5890ff; } .comments { border-top: 1px solid #e1e2e3; background-color: #f6f7f8; margin-top: 10px; padding: 0; } .comment-item { padding: 3px 12px 3px 12px; overflow: hidden; word-wrap: break-word; } .small-icon { width: 32px; height: 32px; position: relative; top: 2px; } .comment-item-message { padding-left: 8px; overflow: hidden; } .user-name { font-weight: bold; color: #3b5998; } .gc-cell { white-space: normal; text-overflow: clip; } .gc-row.gc-focused { background-color: inherit; } .gc-focused .post-wrapper { background-color: #E6EFF9; }bodyタグ内にdivタグを追加して、ページ内のコンテナとしてDOM要素を含めます。
<body style="margin:0;position:absolute;top:0;bottom:0;left:0;right:0;font-size:14px;user-select:none;-webkit-user-select: none;overflow:hidden;"> <div id="grid1" style="height:100%"></div> <template id='rowTemplate' style="display: none"> <div class="post-wrapper"> <div class="user-content-wrapper"> <div class="block-wrapper"> <div class="user-icon" data-column="icon"></div> <div class="user-stamp"> <div> <span class="user-stamp-name" data-column="name"></span> <span class="user-story" data-column="story"></span> </div> <span class="user-stamp-time" data-column="created_time"></span> </div> </div> <div data-column="message"></div> <div> <div data-column="img"></div> <div data-column="video"></div> </div> <div data-column="comment_link"></div> <div> <div class="interface-icons-wrapper"> <div data-column="like" class="interface-icons"></div> <div class="interface-icons"> <a class="comment-icon-link icon-link-comment"><i class="demo-icon icon-comment"></i> comment</a> </div> <div class="interface-icons"> <a class="comment-icon-link icon-link-share"><i class="demo-icon icon-share"></i> share</a> </div> </div> </div> </div> <div data-column="commentUI" class="comments"></div> </div> </template>- 変数定義と列定義を追加します。
var columns = [{ id: 'icon', name: 'icon', dataField: 'icon', presenter: '<a href="{{=it.icon}}"><img src="{{=it.icon}}" style="width:40px;height:40px;"></a>' }, { id: 'created_time', name: 'created_time', dataField: 'created_time', format: 'mm-dd-yyyy' }, { id: 'story', name: 'story', dataField: 'story' }, { id: 'name', name: 'name', dataField: 'name', presenter: '<a class="user-name">{{=it.name}}</a>' }, { id: 'message', name: 'message', dataField: 'message' }, { id: 'comment_link', name: 'comment_link', dataField: 'comment_link', presenter: '<a class="comment-link">' + '<span>{{=(it.total_likes + (it.like ? 1 : 0))}}{{?(it.total_likes + (it.like ? 1 : 0)) > 1}} likes{{??}} like{{?}}</span> ' + '<span>{{=it.total_comments}}{{?it.total_comments <= 1}} comment{{??it.total_comments > 1}} comments{{?}}</span> ' + '<span>{{=it.total_shares}}{{?it.total_shares <= 1}} share{{??it.total_shares > 1}} shares{{?}}</span>' + '</a>' }, { id: 'like', name: 'like', dataField: 'like', presenter: '<a class="comment-icon-link icon-link-like {{?it.like}}icon-checked{{?}}"><i class="demo-icon icon-like"></i> like</a>' }, { id: 'img', name: 'img', dataField: 'img', presenter: '<div>{{~it.img:value:index}}' + '<div class="img-item">' + '<img src="{{=value.url}}" style="width:426px;" alt="{{=value.name}}">' + '</div>' + '{{~}}</div>' }, { id: 'video', name: 'video', dataField: 'video', presenter: '<div>{{~it.video:value:index}}' + '<div class="video-item">' + '<video style="width:426px;height:243px" controls>' + '<source src="{{=value.url}}" type="video/mp4">' + '</video>' + '</div>' + '{{~}}</div>' }, { id: 'commentUI', name: 'commentUI', dataField: 'commentUI', presenter: '{{?it.show_comment}}<div>{{~it.comments:value:index}}' + '<div class="comment-item">' + '<div style="float:left"><img class="small-icon" src="{{=value.icon}}"></div>' + '<div><div class="comment-item-message"><a class="user-name">{{=value.name}}:</a> {{=value.message}}</div></div>' + '</div>' + '{{~}}</div>{{?}}' }, { id: 'total_likes', name: 'total_likes', dataField: 'total_likes', visible: false }, { id: 'total_comments', name: 'total_comments', dataField: 'total_comments', visible: false }, { id: 'total_shares', name: 'total_shares', dataField: 'total_shares', visible: false }, { id: 'comments', name: 'comments', dataField: 'comments', visible: false }, { id: 'show_comment', name: 'show_comment', dataField: 'show_comment', visible: false }]; グリッドを初期化し、クリックイベントを処理する関数を定義します。
var dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns, new GC.Spread.Views.Plugins.GridLayout({ rowTemplate: '#rowTemplate', autoRowHeight: true, showRowHeader: false, showColHeader: false, selectionMode: 'none' })); document.getElementById('grid1').addEventListener('click', handleMouseClick); //focus data.view by default document.querySelector('#grid1').focus(); function handleMouseClick(event) { var grid = dataView; var hitTestInfo = grid.hitTest(event); var row = hitTestInfo.row; var targetList = ['.icon-link-like', '.icon-link-comment']; var i = lookupForElementNames(event, targetList); if (i === 0) { data[row].like = !data[row].like; var cell = document.querySelector('#' + grid.uid + '-r' + row + ' .comment-link span'); var likes = data[row]['total_likes'] + data[row].like; cell.innerHTML = likes > 1 ? likes + ' likes' : likes + ' like'; } else if (i === 1) { if (data[row].video) { return; } data[row].show_comment = !data[row].show_comment; grid.refreshRow_(hitTestInfo); } // return the matched name's index function lookupForElementNames(event, targetNameSet) { var element = event.target; while (element) { // get the first match in the name set for (var i = 0, len = targetNameSet.length; i < len; ++i) { if (matchName(element, targetNameSet[i])) { return i; } } element = element.parentNode; } return -1; } function matchName(element, name) { if (typeof name === 'string') { var initial = name[0]; var str = ''; switch (initial) { case '.': if (!element.classList) { return false; } str = name.slice(1).toLowerCase(); for (var i = 0, len = element.classList.length; i < len; ++i) { if (element.classList[i].toLowerCase() === str) { return true; } } return false; case '#': str = name.slice(1).toLowerCase(); return !!element.id && element.id.toLowerCase() === str; break; default: str = name.toLowerCase(); return element.tagName.toLowerCase() === str; } } } }